<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>大报紫色渐变登录页面静态页面模板源码 - 代码库</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">-->
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
		<link rel="stylesheet" type="text/css" href="css/util.css">
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script src="js/app.js"></script>

		<script type="text/javascript" charset="utf-8" src="http://connect.qq.com/qc_jssdk.js" data-appid="101853320"
		 data-redirecturi="https://www.zoupk.top/moguding/index.html"></script>
	</head>

	<body>

		<div class="limiter">
			<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
				<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
					<form class="login100-form validate-form loginform" method="post">
						<span class="login100-form-title p-b-49">登录</span>

						<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
							<span class="label-input100">用户名</span>
							<input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
							<span class="focus-input100" data-symbol="&#xf206;"></span>
						</div>

						<div class="wrap-input100 validate-input" data-validate="请输入密码">
							<span class="label-input100">密码</span>
							<input class="input100" type="password" name="password" placeholder="请输入密码">
							<span class="focus-input100" data-symbol="&#xf190;"></span>
						</div>

						<div class="text-right p-t-8 p-b-31">
							<a href="javascript:">忘记密码？</a>
						</div>

						<div class="container-login100-form-btn">
							<div class="wrap-login100-form-btn">
								<div class="login100-form-bgbtn"></div>
								<button class="login100-form-btn loginbutton" type="button">登 录</button>
							</div>
						</div>

						<div class="txt1 text-center p-t-54 p-b-20">
							<span>第三方登录</span>
						</div>

						<div class="flex-c-m">
							<!--                    <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101853320&redirect_uri=https://www.zoupk.top/moguding/index.html&state=0" style="margin-left: 8px">
 -->
							<img src="images/QQ.png" alt="" width="50px" height="50px" id="qqLoginBtn">
							<!-- <span id="qqLoginBtn"></span> -->

							<a href="#" style="margin-left: 8px">
								<img src="images/微信.png" alt="" width="50px" height="50px">
							</a>

							<a href="#" style="margin-left: 8px">
								<img src="images/微博.png" alt="" width="50px" height="50px">
							</a>
						</div>

						<div class="flex-col-c p-t-175">
							<a href="register.html" class="txt2">立即注册</a>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
		<script src="js/main.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
		<script>
			$(function() {
		
			    $("#qqLoginBtn").click(function() {
			        QC.Login.showPopup({
			            appId: "101853320",
			            redirectURI: "https://www.zoupk.top/moguding/index.html"
			        })
			    })
			    $(".loginbutton").click(function() {

			        let data = $(".loginform").serialize();



			        $.ajax({
			            //请求方式
			            type: "POST",
			            //请求的媒体类型
			            //请求地址
			            url: app.serviceurl + "login",
			            xhrFields: {
			                withCredentials: true
			            },
			            data: data,
			            //请求成功
			            success: function(result) {
			                if (result.status == 0) {
			                    //
			                    window.location.href = "index.html";

			                }


			            },
			            //请求失败，包含具体的错误信息
			            error: function(e) {
							alert(JSON.stringify(e))

			            }
			        });


			    })
			})
		</script>
	</body>

</html>
